<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li style="background-color: brown;margin-top: 5px;"></li>
        <li style="background-color: brown;margin-top: 5px;"></li>
        <li style="background-color: brown;margin-top: 5px;"></li>
        <li style="background-color: brown;margin-top: 5px;"></li>
    </ul>
    <!-- <div style="width: 100px;height: 100px;background-color: #000;position: absolute;border-radius: 20px;"></div> -->
    <script>
        var div = document.getElementsByTagName('div')[0];
        // div.onclick = function() {
        //     div.style.top = '100px';
        // }

        //      如何绑定事件处理函数
        // 1.ele.onxxx = function(event){}//句柄
        //    兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序
        //    基本等同于写在HTML行间上
        // 2.obj.addEventListener(type,fn,false);
        //    IE9以下不兼容，可以为一个事件绑定多个处理程序,重复的函数只绑定一次
        // div.addEventListener(事件类型，处理函数，false);
        // div.addEventListener('click', function() {
        //     div.style.height = '200px';
        // }, false);
        // div.addEventListener('click', function() {
        //     div.style.width = '200px';
        //     div.style.backgroundColor = 'red';
        // }, false);

        // 3.obj.attachEvent('on' + type,fn);
        //    IE独有，一个事件同样可以绑定多个处理程序,同一个函数绑定多次就能执行多次
        // div.attachEvent('on' + 事件类型，处理函数);

        // 如果绑定事件出现在循环当中，（用到for循环中的i）得考虑是否形成闭包
        // 使用原生js,addEventListener,给每一个li元素绑定一个click事件并输出他们的顺序
        // var liCol = document.getElementsByTagName('li'),
        //     len = liCol.length;
        // for (var i = 0; i < len; i++) {
        //     (function(i) {
        //         liCol[i].addEventListener('click', function() {
        //             console.log(i);
        //         }, false);
        //     }(i))
        // }
    </script>
</body>

</html>